<template>
  <div class="home">
    <tophead title="SFA首页" ><router-link to="/user" tag="i" slot="r" class="icon iconfont icon-user"></router-link></tophead>
    <div class="main-bd">
      <div class="data-wrap">{{ getYearMonth }}</div>
      <div class="mp-wrap">
        <mychart title="当前月进度" :val="getCurrentDay" :isshowprecent="true"></mychart>
        <mychart title="月销售完成度" :val="monthSealpercent" :isshowprecent="true"></mychart>
        <mychart title="有效店铺数" :val="shops" :isshowprecent="false"></mychart>
      </div>
    </div>
    <div class="main-nav">
      <div class="nav-cell" v-for="i in 9" :key="i">
        <template v-if="i <= menulist.length">
          <menucell :url="menulist[i-1].url" :imgurl="menulist[i-1].imgUrl" :menuname="menulist[i-1].menuName"></menucell>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TopHead from "@/components/TopHead.vue";
import MyChart from "@/components/Chart.vue";
import service from "../../service/index.js";
//import MenuList from "@/static/indexMenu.json";
import MenuCell from "@/components/MenuCell.vue";

const MenuList = [
  {
    menuName: "公司通告",
    imgUrl: require("@/assets/img/gstg.png"),
    url: "/notice"
  },
  {
    menuName: "进店拜访",
    imgUrl: require("@/assets/img/jdbf.png"),
    url: "/visitshop"
  },
  {
    menuName: "电话订单",
    imgUrl: require("@/assets/img/dhdd.png"),
    url: "/phoneorder"
  },
  {
    menuName: "订单状态",
    imgUrl: require("@/assets/img/ddzt.png"),
    url: "/orders"
  },
  {
    menuName: "培训资料",
    imgUrl: require("@/assets/img/pxzl.png"),
    url: "/training"
  },
  {
    menuName: "消息中心",
    imgUrl: require("@/assets/img/xxzx.png"),
    url: "/message"
  },
  {
    menuName: "新增门店",
    imgUrl: require("@/assets/img/xzmd.png"),
    url: "/addedshop"
  },
  {
    menuName: "同步数据",
    imgUrl: require("@/assets/img/tbsj.png"),
    url: "/asyncdata"
  }
];

export default {
  name: "home",
  data() {
    return {
      shops: 0,
      monthSealpercent: 0,
      menulist: MenuList
    };
  },
  created() {
    service.getUserProgress().then(result => {
      this.shops = result.data.totalShops;
      this.monthSealpercent = parseInt(result.data.monthPercent * 100);
    });
  },
  computed: {
    getYearMonth() {
      let date = new Date();
      return `${date.getFullYear()}年${date.getMonth() + 1}月`;
    },
    getCurrentDay() {
      let date = new Date();
      return parseInt(100 * (date.getDate() / 30));
    }
  },
  components: {
    tophead: TopHead,
    mychart: MyChart,
    menucell: MenuCell
  }
};
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  .main-nav {
    flex: 1;
    padding: 0 px2rem(30);
    display: flex;
    flex-flow: row wrap;
    align-content: stretch;
    align-items: stretch;
    border-top: 1px solid #ccc;
    .nav-cell {
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      flex: 1 1 30%;
    }
    .nav-cell:nth-child(3n) {
      border-right: none;
    }
  }
}
.main-bd {
  background-color: #fff;
  .date-wrap {
    padding: px2rem(40) 0 px2rem(22);
    color: #000;
    font-size: $text-size-mid;
    text-align: center;
  }
  .mp-wrap {
    display: flex;
    justify-content: space-around;
  }
}
#pie {
  width: px2rem(500);
  height: px2rem(400);
}
</style>
